<article>
	<h1><?php echo $GLOBALS['title'] ?></h1>
	<p>传统很多web页面是的图标都是通过图片来实现，把多个小图标做在一张图片上，然后用定位的方法来显示相对的位置，而最近流行的图标字体，替换了传统的方式，使得咱们的web开发更容易，方便，图标字体都是矢量的，也就可以任意缩放，避免了一个图标做多种尺寸的麻烦。CSS对字体可以设置的样式也同样能够运用到这些图标上了。</p>
	<h3>实例</h3>
	<img src="__PUBLIC__/images/fontsico.png" alt="">
	<h2><a>第一步，下载字库文件</a></h2>
	<p>该类图标类似于特殊文字，需要有对应的字库文件支持，
所以第一步我们应该获得该网站图标的字库文件。</p>
	<p>打开网站源代码，找到css文件，在里面搜索并下载后
缀为<code>eot、svg、ttf、woff</code>的字库文件</p>
	<h2><a>第二步，添加CSS控制代码</a></h2>
	<p>在css中添加以下代码，其中蓝色的部分分别是四个字库文件的路径</p>
	<pre><code><?php echo htmlspecialchars("
<style type='text/css'>
	@font-face {
		font-family:'iconfont';
		src:url('iconfont.eot');
		src:url('iconfont.eot?#iefix') format('embeddedopentype'),url('iconfont.woff') format('woff'),url('yhd/iconfont.ttf')
		format('truetype'),url('iconfont.svg#uxiconfont') format('svg');
	}
</style>") ?></code></pre>
	<h2><a>第三步，控制html元素</a></h2>
	<p>在html中加入具体符号的特征码即可</p>
	<p>一定要给该标签加 <code>font-family: "iconfont"</code> 属性</p>
	<h3>实例</h3>
	<pre><code><?php echo htmlspecialchars("<span style='font-family: 'iconfont';'>&#xf0007;</span>") ?></code></pre>
</article>

	
